<template>
  <div style="height: 650px; margin: 20px 0 -20px 0">
    <!-- 导航栏头部 -->
    <div style="background: white">
      <div class="body">
        <p class="header-text">美化头部</p>
        <div class="header">
          <div
            class="header-box hedaer-box-2"
            @click="hand($event)"
            style="background: rgb(67, 56, 202)"
          >
            <!-- <el-result icon="success" v-show="true" /> -->
          </div>
          <div
            class="header-box hedaer-box-3"
            @click="hand($event)"
            style="background: rgb(240, 141, 1)"
          >
            <!-- <el-result icon="success" /> -->
          </div>
          <div
            class="header-box hedaer-box-4"
            @click="hand($event)"
            style="background: rgb(233, 97, 123)"
          >
            <!-- <el-result icon="success" v-show="show3" /> -->
          </div>
          <div
            class="header-box hedaer-box-5"
            @click="hand($event)"
            style="background: rgb(200, 8, 81)"
          >
            <!-- <el-result icon="success" v-show="show4" /> -->
          </div>
          <div
            class="header-box hedaer-box-1"
            style="background: rgb(196, 169, 192)"
            @click="hand($event)"
          >
            <!-- <el-result icon="success" v-show="show5" /> -->
          </div>
        </div>
        <div class="header-box-name">
          <div>默认色</div>
          <div>太阳橙</div>
          <div>山茶粉</div>
          <div>宝石红</div>
          <div>风信紫</div>
        </div>
        <div class="custom-color">
          <span>自定义颜色</span>
          <span
            ><el-color-picker
              v-model="color"
              show-alpha:false
              :predefine="predefineColors"
              size="small"
              @change="change"
            >
            </el-color-picker
          ></span>
        </div>
        <!-- 主题 -->
        <p class="body-text">主体美化</p>
        <div class="aaa">
          <div
            class="body-box-1 abcd"
            @click="hand_body($event)"
            style="background: rgb(241, 242, 246)"
          >
            <!-- <el-result icon="success" v-show="show6" /> -->
          </div>
          <div
            class="body-box-2 abcd"
            @click="hand_body($event)"
            style="background: rgb(0, 164, 197)"
          >
            <!-- <el-result icon="success" v-show="show7" /> -->
          </div>
          <div
            class="body-box-3 abcd"
            @click="hand_body($event)"
            style="background: rgb(233, 97, 123)"
          >
            <!-- <el-result icon="success" v-show="show8" /> -->
          </div>

          <div
            class="body-box-4 abcd"
            @click="hand_body($event)"
            style="background: rgb(233, 43, 119)"
          >
            <!-- <el-result icon="success" v-show="show9" /> -->
          </div>

          <div
            class="body-box-5 abcd"
            @click="hand_body($event)"
            style="background: rgb(130, 166, 140)"
          >
            <!-- <el-result icon="success" v-show="show10" /> -->
          </div>
        </div>
        <div class="header-box-name">
          <div>默认色</div>
          <div>孔雀蓝</div>
          <div>水晶紫</div>
          <div>满江红</div>
          <div>松霜绿</div>
        </div>
        <div class="custom-color">
          <span>自定义颜色</span>
          <span
            ><el-color-picker
              v-model="color"
              show-alpha:false
              :predefine="predefineColors"
              size="small"
              @change="change1"
            >
            </el-color-picker
          ></span>
        </div>
      </div>
      <div style="text-align: left; margin-top: 80px">
        <p class="font">
          Copyright © 2013 by Perchouli Shanzhai to Nipponcolors
        </p>
        <!-- <p class="font">
          参看: 色谱 中科院科技情报编委会名词室.科学出版社,1957. Adobe RGB /
          CMYK FOGRA39, Dot Gain 15% Screenshot沪ICP备17025116号-2
        </p> -->
      </div>
    </div>
  </div>
</template>

<script>
import { Button } from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Vue from "vue";
Vue.use(Button);

export default {
  methods: {
    change() {
      // this.$store.state.color = this.color;
      this.$store.commit("setColor", this.color);
      // console.log(this.color);
    },
    change1() {
      // console.log(123);
      this.$store.commit("setBodyColor", this.color);
    },
    hand(e) {
      this.$store.commit("setColor", e.target.style.backgroundColor);
      // localStorage.setItem("vuex", "{ color:red }");
    },
    hand_body(e) {
      // console.log(this.$refs.dataNum.a);
      this.$store.commit("setBodyColor", e.target.style.backgroundColor);
    },
  },

  data() {
    return {
      color: "rgba(255, 69, 0, 0.68)",
      predefineColors: [
        "#ff4500",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "rgba(255, 69, 0, 0.68)",
        "rgb(255, 120, 0)",
        "hsv(51, 100, 98)",
        "hsva(120, 40, 94, 0.5)",
        "hsl(181, 100%, 37%)",
        "hsla(209, 100%, 56%, 0.73)",
        "#c7158577",
      ],
    };
  },
  mounted() {
    // console.log(this.$store.state);
  },
};
</script>

<style scoped>
.body {
  height: 600px;
  width: 90%;
  margin: auto;

  /* margin-top: 0px; */
  /* margin-top: 20px; */
}

.btn {
  float: left;
  margin-top: -55px;
}
.header {
  display: flex;
  justify-content: space-around;
}
.aaa {
  display: flex;
  justify-content: space-around;
}
.abcd {
  height: 150px;
  width: 200px;
  background: red;
  border-radius: 10px;
}
.header-box {
  height: 150px;
  width: 200px;
  background: red;
  border-radius: 10px;
}
.header-text {
  font-size: 20px;
  font-weight: bolder;
  height: 80px;
  width: 150px;
  text-align: center;
  line-height: 110px;
}
.body-text {
  font-size: 20px;
  font-weight: bolder;
  height: 80px;
  width: 150px;
  text-align: center;
  line-height: 110px;
}
.header-box-name {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  font-weight: 800;
  font-size: 18px;
}
html,
body {
  background: #000;
}
.font {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: rgb(144, 144, 144);
  margin-top: 20px;
  height: 30px;
  padding-left: 20px;
}
/* 自定义颜色 */
.custom-color {
  height: 60px;
  width: 100%;
  text-align: left;
  padding-left: 35px;
  line-height: 100px;
}
.el-color-picker el-color-picker--small {
  vertical-align: middle;
}
</style>
